<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('新增商户')" />
    <th:block th:include="include :: summernote-css" />
    <th:block th:include="include :: jasny-bootstrap-css" />
</head>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
        <form class="form-horizontal m" id="form-shop-add">
            <div class="form-group">
                <label class="col-sm-3 control-label">关联区域：</label>
                <div class="col-sm-8">
                    <div class="input-group">
                        <input id="treeId" name="areaId" type="hidden" th:value="${areaId}"/>
                        <input class="form-control" type="text" onclick="selectAreaTree()" id="treeName" readonly="true" th:value="${areaName}">
                        <span class="input-group-addon"><i class="fa fa-search"></i></span>
                    </div>
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label">名称：</label>
                <div class="col-sm-8">
                    <input name="name" class="form-control" type="text" required>
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label">地址：</label>
                <div class="col-sm-8">
                    <input name="address" class="form-control" type="text" required>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">商户简介：</label>
                <div class="col-sm-8">
                    <input name="brief" class="form-control" type="text" required>
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label">电话号码：</label>
                <div class="col-sm-8">
                    <input name="phone" class="form-control" type="text" required>
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label">经度：</label>
                <div class="col-sm-8">
                    <input name="lat" class="form-control" type="text">
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label">纬度：</label>
                <div class="col-sm-8">
                    <input name="lng" class="form-control" type="text">
                </div>
                <!--<input type="text" id="id_address_input" name="address12"/>-->
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">是否启用：</label>
                <div class="col-sm-3">
                    <label class="toggle-switch switch-solid">
                        <input type="checkbox" id="states" checked>
                        <span></span>
                    </label>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">展示图片：</label>
                <div class="col-sm-8">
                    <input id="fileinput-input" name="image" class="form-control" type="text" style="display: None">
                    <div class="fileinput fileinput-new" data-provides="fileinput">
                        <div class="fileinput-preview thumbnail" data-trigger="fileinput" style="width: 200px; height: 150px;"></div>
                        <div>
                            <span class="btn btn-white btn-file"><span class="fileinput-new">选择图片</span><span class="fileinput-exists">更改</span>
                                <input name="fileinput-1" id ="fileinput-1" type="file">
                            </span>
                            <a href="#" class="btn btn-white fileinput-exists" data-dismiss="fileinput">清除</a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">商户详细介绍：</label>
                <div class="col-sm-8">
                    <!--<input name="detail" class="form-control" type="text">-->
                    <div class="ibox-content no-padding">
                        <div class="summernote">
                            <h2>请填写商家介绍</h2>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
    <th:block th:include="include :: footer" />
    <!--<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=fe7ff0a98aa9dc73092d23897fb9ca57"></script>-->
    <!--<script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>-->
    <!--<script type="text/javascript" src="http://cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>-->
    <!--<script th:src="@{/js/bootstrap.AMapPositionPicker.min.js}"></script>-->
    <th:block th:include="include :: summernote-js" />
    <th:block th:include="include :: jasny-bootstrap-js" />
    <script type="text/javascript">
        var prefix = ctx + "normal/shop"
        $(function(){
                //$("#id_address_input").AMapPositionPicker();
                $("#fileinput-1").fileinput({
                    'name':'text-1',
                    'clearName':true
                });
                $('.summernote').summernote({
                    lang: 'zh-CN',
                    callbacks:{
                        onImageUpload: function (files) {
                            //上传图片到服务器
                            var formData = new FormData();
                            formData.append('file',files[0]);
                            $.ajax({
                                url : "/common/upload",//后台文件上传接口
                                type : 'POST',
                                data : formData,
                                processData : false,
                                contentType : false,
                                success : function(result) {
                                    $('.summernote').summernote('insertImage',result.url);
                                },error:function(){
                                    alert("上传失败");
                                }
                            });
                        }
                    }
                });
            }
        )

        $("#form-shop-add").validate({
            focusCleanup: true
        });

        $("#fileinput-1").on("change.bs.fileinput", function (event, data, previewId, index) {
            var file =  this.files[0];
            if (file == null || file == undefined){
                alert("置空");
                return;
            }
            var formFile = new FormData();
            formFile.append("action", "UploadVMKImagePath");
            formFile.append("file", file); //加入文件对象
            var data = formFile;
            $.ajax({
                url: "/common/upload",
                type: "POST",
                data:data,
                dataType: "json",
                cache:false,         //不设置缓存
                processData: false,  // 不处理数据
                contentType: false,   // 不设置内容类型
                success: function (result) {
                    console.log(result);
                    if(result.code == 0){
                        $('#fileinput-input').val(result.url);
                        alert("上传完成!");
                    }else{
                        alert("上传失败");
                    }
                },
            });
        });
        function submitHandler() {
            if ($.validate.form()) {
                var detail = $('.summernote').summernote('code');
                var states = $("input[id='states']").is(':checked') == true ? 1 : 0;
                var data = $.param({'detail': detail}) + '&' +
                    $.param({'states': states}) + '&' +
                    $('#form-shop-add').serialize();
                $.operate.save(prefix + "/add", data);
            }
        }

        /*商家地区-新增-选择父部门树*/
        function selectAreaTree() {
            var options = {
                title: '商家地区选择',
                width: "380",
                url: ctx + "normal/area" + "/selectAreaTree/" + $("#treeId").val(),
                callBack: doSubmit
            };
            $.modal.openOptions(options);
        }

        function doSubmit(index, layero){
            var body = layer.getChildFrame('body', index);
            $("#treeId").val(body.find('#treeId').val());
            $("#treeName").val(body.find('#treeName').val());
            layer.close(index);
        }
    </script>
</body>
</html>